<template>
  <div class="home">
    <div class="onebox" id="onebox">
      <div class="second">
        <div class="logo"></div>

        <div class="list" :class="{ 'list-min': minList }">
          <div :class="{ trance: trancelist }">
            <a class="slide_1" href="">业务</a>
            <a class="slide_1" href="">商品</a>
            <a class="slide_1" href="">API</a>
            <a class="slide_1" href="">活动</a>
            <a class="slide_1" href="">福利</a>
            <a class="slide_1" href="">路由</a>
            <button class="sign" @click="sign" v-if="!trancelist">登入</button>
            <el-avatar
              v-else
              class="profile"
              :size="62"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            >
            </el-avatar>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- sub组件开始 -->
  <Sub />
  <!-- sub组件开始 -->
</template>

<script>
// @ is an alias to /src

import { ref, computed } from "vue";
import { useRouter } from "vue-router"; //____________________暂停 `
import Sub from "./SubHome.vue";
import { useStore } from "vuex";
export default {
  components: {
    Sub,
  },
  setup() {
    const router = useRouter();
    const sign = () => {
      router.push("/login");
    };
    const minList = ref(false);
    /**判断最小宽度 */

    console.log(document.body.clientWidth);
    const vuexdata = useStore();
    //trancelist属性true为已登入状态
    const trancelist = computed(() => {
      return vuexdata.state.profile;
    });

    if (localStorage.getItem("username")) {
      const username = localStorage.getItem("username");
      console.log(username);
      vuexdata.commit("tranceProfile", true);
      // vuexdata.commit('tranceProfile',true)
    }

    return { sign, minList, trancelist };
  },
  beforeMount() {},
  // 最小宽度,适应窗口
  mounted() {
    const that = this;
    window.onresize = () => {
      if (document.body.clientWidth < 695) {
        that.minList = true;
        console.log("宽度小于695");
      } else {
        that.minList = false;
      }
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  color: black;
}
.onebox {
  width: 100vw;
  height: 70px;
  background: rgb(95, 80, 145);
  border-bottom: 1px solid black;
}
.second {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100vw;
  height: 100%;
}
.logo {
  width: 80px;
  height: 70px;
  margin-right: 20%;
  margin-left: 10px;
  background: url(../assets/Pumas_logo.png) no-repeat;
  background-size: cover;
}
.list {
  transform: translateY(15px);
  width: 75%;
  height: 30px;
}
.list a {
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  margin: 0 0 0 5%;
}

/**最小宽度 */
.list-min a {
  opacity: 0;
  margin: 0;
  padding: 0;
  font-size: 0.1px;
}

/**字体滑动组件 开始 */
/* ----------------------------------------------
 * Generated by Animista on 2022-2-16 21:25:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation focus-in-contract-bck
 * ----------------------------------------
 */

/* ----------------------------------------------
 * Generated by Animista on 2022-2-16 21:26:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

/**字体滑动组件 结束 */

/**头像 开始 */
.profile {
  transform: translateY(24px);

  margin-left: 50px;
  background: url(../assets/黑狮子.jpg); /**这里是默认链接 到时候用户传上头像应该是再src获取 */
  background-size: cover;
}
/**改变列表位置*/
.second .trance {
  transform: translateY(-36px);
}
/**头像 结束 */

/** */
</style>
